<template>
  <div id="router" ref="mark" :data-set="themeColor">
    <router-view />
  </div>
</template>
<script lang="ts" setup>
import waterMark from '@/utils/WaterMark'
import { onMounted, ref } from 'vue'
import BrowserFinger from '@/utils/BroswerFinger'
onMounted(() => {
  appMark()
  mutationObser()
  BrowserFinger()
})

//绘制水印
let mark = ref()
let imgUrl = ref()
const appMark = () => {
  imgUrl.value = waterMark({
    text: 'coderjk',
    width: 250,
    height: 250,
    textSize: '20px Verdana',
    rotate: 70 * Math.PI / 180
  })
  let dom = mark.value
  dom.style.backgroundImage = `url(${imgUrl.value})`
  dom.style.backgroundRepeat = 'repeat';
}

//监听dom变化
const mutationObser = () => {
  let observer = new MutationObserver(function (mutations) {
    if (mutations[0].attributeName == 'style') {
      appMark()
    }
  })
  observer.observe(mark.value, { attributes: true, characterData: true, childList: true })
}

let themeColor = ref('drak')
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#router {
  width: 100vw;
  height: 100vh;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
